Component({
  externalClasses: ['img-class'],
  properties: {
    src: {
      type: String,
      value: ""
    },
    mode: {
      type: String,
      value: "scaleToFill"
    },
    localSrc:{
      type:String,
      value:"",
    },
    webp: {
      type: Boolean,
      value: false
    },
    lazyLoad: {
      type: Boolean,
      value: false
    },
    showMenuByLongpress: {
      type: Boolean,
      value: false
    },
    height: {
      type: String,
      value: ""
    },
    width: {
      type: String,
      value: ""
    },
    borderRadius: {
      type: String,
      value: ""
    },
    cdn: {
      type: Boolean,
      value: false
    },
    quality: {
      type: String,
      value: 90
    }
  },
  data: {
    realSrc: ''
  },
  observers: {
    'src': function (value) {
      if (value) {
        let imgUrl = getApp().toFullUrl(value);
        if (this.data.cdn && this.data.width) {
          let width = this.data.width;
          let quality = this.data.quality;
          width = width.replace("rpx", '')
          width = width.replace("px", '')
          imgUrl = imgUrl + '?x-oss-process=image/resize,w_' + width + ",m_lfit/quality,q_" + quality
        }
        this.setData({ 'realSrc': imgUrl })
      } else {
        this.setData({ 'realSrc': "" })
      }
    }
  },
  methods: {
    handleLoad(e) {
      this.triggerEvent('load', e.detail);
    },
    handleError(e) {
      this.triggerEvent('error', e.detail);
    },
  }
})
